<script setup>
import VIcon from "./VIcon.vue";

const props = defineProps({
  menuData: {
    type: Array,
    default: () => []
  }
});
</script>

<template>
  <div class="v-menu-item">
    <template v-for="item in menuData">
      <!-- 判断是否存在子菜单 -->
      <el-sub-menu v-if="!item.hidden && item.children?.length > 0" :index="item.name">
        <template #title>
          <v-icon v-if="item.meta?.icon" :icon="item.meta?.icon" size="18"/>
          <span>{{ item.meta?.title || item.name }}</span>
        </template>
        <!-- 递归遍历子菜单 -->
        <v-menu :menuData="item.children"></v-menu>
      </el-sub-menu>
      <!-- 没有子菜单，则直接显示 -->
      <el-menu-item v-else-if="!item.hidden" :index="item.name" style="height: var(--menu-height);">
        <v-icon v-if="item.meta?.icon" :icon="item.meta?.icon" size="18"/>
        <span>{{ item.meta?.title || item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<style scoped>
.v-menu-item {
  ::v-deep(.el-sub-menu__title) {
    height: var(--menu-height);
  }
}
</style>